import * as THREE from 'three';
import TWEEN from '../../../node_modules/three/examples/jsm/libs/tween.module.js';


//绘制圆的动画
//centerPoint:圆心
//startAngle:开始角度，调用处传入角度，内部用弧度
//endAngle:结束角度
//duration:动画时间
class circleAnimate{
    constructor(scene,centerPoint,xRadius,yRadius,startAngle,endAngle,duration){
        this.scene = scene;
        this.centerPoint = centerPoint;
        this.xRadius = xRadius;
        this.yRadius = yRadius;
        this.startAngle = startAngle;
        this.endAngle = endAngle;
        this.duration = duration;
        this.currentLine=0;
        this.allPointCount=100;
        return this.init();
    }

    createCirclePoints(){
        const curve = new THREE.EllipseCurve(
            this.centerPoint.x,  this.centerPoint.y, 
            this.xRadius, this.yRadius,   
            this.startAngle, this.endAngle,
            false,      
            0 
        );
        this.circlePoints = curve.getPoints( this.allPointCount );
    }
    
    createLines(){
        this.lines=new Array(this.allPointCount);
        const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

        for(let i=0;i<this.allPointCount-1;i++){
            let sp3=new THREE.Vector3(this.circlePoints[i].x,this.circlePoints[i].y,0);
            let ep3=new THREE.Vector3(this.circlePoints[i+1].x,this.circlePoints[i+1].y,0);
            let geometry = new THREE.BufferGeometry().setFromPoints([sp3, ep3]  );
            this.lines[i]=new THREE.Line(geometry, material);
            this.lines[i].visible = false;
            this.scene.add(this.lines[i]);
            geometry.attributes.position.needsUpdate = true;
        }
        //首尾相连的线
        let sp3=new THREE.Vector3(this.circlePoints[this.allPointCount-1].x,this.circlePoints[this.allPointCount-1].y,0);
        let ep3=new THREE.Vector3(this.circlePoints[0].x,this.circlePoints[0].y,0);
        let geometry = new THREE.BufferGeometry().setFromPoints([sp3, ep3]  );
        this.lines[this.allPointCount-1]=new THREE.Line(geometry, material);
        this.lines[this.allPointCount-1].visible = false;
        this.scene.add(this.lines[this.allPointCount-1]);
        geometry.attributes.position.needsUpdate = true;
    }
    
    animate(){
        //用TWEEN.update()来更新线条数组this.lines，使看起来像是在画一个圆
        let currentIndex = 0;
        const self = this;
        
        // 创建一个补间动画
        new TWEEN.Tween({ progress: 0 })
            .to({ progress: this.allPointCount }, this.duration)
            .onUpdate(function(obj) {
                // 计算当前应该显示到第几条线
                const lineIndex = Math.floor(obj.progress);
                
                // 显示新的线条
                while(currentIndex < lineIndex && currentIndex < self.allPointCount) {
                    self.lines[currentIndex].visible = true;
                    currentIndex++;
                }
            })
            .onComplete(function() {
                // 确保所有线条都显示
                for(let i = 0; i < self.allPointCount; i++) {
                    self.lines[i].visible = true;
                }
            })
            .start();
    }
    init(){
        
        this.createCirclePoints();
        this.createLines();
        this.animate();
        //console.log(this.lines);
        return this.lines;
        
    }
        // 创建一个几何体来表示线条
}

export default circleAnimate;
